<template>
  <el-form class="reset-form" :model="resetForm" :rules="resetRules" ref="resetFormRef" size="large">
    <el-form-item label="" prop="account">
      <el-input type="text" placeholder="请输入账号" v-model="resetForm.account" />
    </el-form-item>

    <el-form-item label="" prop="oldPassword">
      <el-input type="password" placeholder="请输入旧密码" v-model="resetForm.oldPassword" />
    </el-form-item>

    <el-form-item label="" prop="newPassword">
      <el-input type="password" placeholder="请输入新密码" v-model="resetForm.newPassword" />
    </el-form-item>

    <el-form-item label="" prop="confirmNewPassword">
      <el-input type="password" placeholder="请再次输入新密码" v-model="resetForm.confirmNewPassword" />
    </el-form-item>

    <el-form-item>
      <el-button class="login-btn" type="primary" @click="handleSubmit" :loading="loading">确认重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { resetPassword } from '@/api/user'

const emit = defineEmits(['back', 'success'])

const resetFormRef = ref(null)
const loading = ref(false)

// 表单数据
const resetForm = reactive({
  account: '',
  oldPassword: '',
  newPassword: '',
  confirmNewPassword: ''
})

// 密码验证规则
const validatePassword = (rule, value, callback) => {
  const account = resetForm.account
  if (!value) {
    callback(new Error('请输入密码'))
    return
  }
  if (value.includes(account)) {
    callback(new Error('密码不能包含账号'))
    return
  }

  // 检查密码是否包含至少三种字符类型
  let types = 0
  if (/[A-Z]/.test(value)) types++ // 大写字母
  if (/[a-z]/.test(value)) types++ // 小写字母
  if (/[0-9]/.test(value)) types++ // 数字
  if (/[^A-Za-z0-9]/.test(value)) types++ // 特殊字符

  if (value.length < 8) {
    callback(new Error('密码长度不能少于8位'))
    return
  }

  if (types < 3) {
    callback(new Error('密码必须包含大写字母、小写字母、数字、特殊字符中的三种'))
    return
  }

  callback()
}

// 确认密码验证
const validateConfirmPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请再次输入新密码'))
    return
  }
  if (value !== resetForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
    return
  }
  callback()
}

// 表单验证规则
const resetRules = {
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  newPassword: [{ required: true, validator: validatePassword, trigger: 'blur' }],
  confirmNewPassword: [{ required: true, validator: validateConfirmPassword, trigger: 'blur' }]
}

// 提交表单
const handleSubmit = async () => {
  if (!resetFormRef.value) return

  await resetFormRef.value.validate(async valid => {
    if (valid) {
      loading.value = true
      try {
        await resetPassword({
          account: resetForm.account,
          oldPassword: resetForm.oldPassword,
          newPassword: resetForm.newPassword,
          confirmNewPassword: resetForm.confirmNewPassword
        })
        emit('success')
        emit('back')
      } catch (error) {
        ElMessage.error(error.message || '密码重置失败')
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.reset-form {
  padding-top: 10px;
  .login-btn {
    height: 50px;
    width: 100%;
  }

  .el-form-item--large:not(:last-child) {
    margin-bottom: 18px;
    .el-input--large {
      --el-input-height: 50px;
    }
  }
}

::v-deep .el-form-item__error:before {
  display: none !important;
}
</style>
